import React, { useEffect, useState } from "react";
import { Card, List } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";

import "./index.less";
import { useLocation, useNavigate } from "react-router-dom";
import { BASE_IMG_URL } from "../../utils/constants";
import { reqCategoryName } from "../../api";

// 显示商品描述的组件
const ProductDetail: React.FC = () => {
  // useNavigate()包含实现编程式导航的方法
  const navigate = useNavigate();
  // 使用useLocation钩子函数获取跳转到这个页面时候携带的参数
  const location = useLocation();
  // 使用useLocation钩子函数获取跳转到这个页面时候携带的参数 获取到参数解构出来
  const { pCategoryId, categoryId, name, desc, price, detail, imgs } =
    location.state.data;

  // 存储当前商品所处分类名称 一级分类名称和二级分类名称 如 电气-->洗衣机
  const [cName1, setcName1] = useState("");
  const [cName2, setcName2] = useState("");

  // getCategoryName根据当前选择的商品详情的categoryId和pCategoryId来查询对于的分类
  const getCategoryName = async () => {
    if (pCategoryId === 0) {
      // 一级分类下的商品名称
      const { data: res } = await reqCategoryName(categoryId);
      console.log(res);
    } else {
      // -------- 连续用两个reqCategoryName请求是可以的但是效率太低 可以换一种写法用promise.all
      // // 获取二级分类下的商品名称
      // const {
      //   data: {
      //     data: { name: res1 },
      //   },
      // } = await reqCategoryName(categoryId);

      // // 获取一级分类下的商品名称
      // const {
      //   data: {
      //     data: { name: res2 },
      //   },
      // } = await reqCategoryName(pCategoryId);

      // ----------- Promise.all
      // Promise.all要传入多个请求组成的数组 当两个都成功的时候才返回结果
      // 并且返回结果的是一个list 请求数组中所有的结果组成的list
      const resList = await Promise.all([
        reqCategoryName(categoryId),
        reqCategoryName(pCategoryId),
      ]);

      // 解构重命名设置获取到的分类名称
      const {
        data: {
          data: { name: res1 },
        },
      } = resList[0];

      const {
        data: {
          data: { name: res2 },
        },
      } = resList[1];

      // 将得到的查询分类设置到分类状态中
      setcName1(res1);
      setcName2(res2);
    }
  };

  useEffect(() => {
    getCategoryName();
    console.log("getCategoryName");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 详情内容的返回按钮
  const title = (
    <span
      style={{ color: "green", fontSize: 20, cursor: "pointer" }}
      onClick={() => {
        // navigate(-1)表示goback  navigate(1)表示前进
        navigate(-1);
      }}
    >
      <ArrowLeftOutlined />
      <span style={{ marginLeft: 10 }}>商品详情</span>
    </span>
  );

  return (
    <div>
      <Card title={title} className="product-detail">
        <List>
          <List.Item className="product-item">
            <span className="left">商品名称:</span>
            <span>{name}</span>
          </List.Item>

          <List.Item className="product-item">
            <span className="left">商品描述:</span>
            <span>{desc}</span>
          </List.Item>

          <List.Item className="product-item">
            <span className="left">商品价格:</span>
            <span>{price}</span>
          </List.Item>

          <List.Item className="product-item">
            <span className="left">商品分类:</span>
            <span>
              {cName1} {cName2 ? "--> " + cName2 : ""}
            </span>
          </List.Item>

          <List.Item className="product-item">
            <span className="left">商品图片:</span>
            <span>
              {imgs.map((img: any) => (
                <img
                  key={img}
                  className="product-img"
                  src={BASE_IMG_URL + img}
                  alt="imgs"
                ></img>
              ))}
            </span>
          </List.Item>

          <List.Item className="product-item">
            <span className="left">商品详情:</span>
            {/* dangerouslySetInnerHTML这个属性可以直接解析__html后的字符串为html标签 */}
            <span dangerouslySetInnerHTML={{ __html: detail }}></span>
          </List.Item>
        </List>
      </Card>
    </div>
  );
};

export default ProductDetail;

// 视频P66
